<template>
	<sw-form-frame v-model="visible" title="库角色" width="992" :type="formType" :loading="btnLoading" footer @submit="handleSubmitForm()">
		<div class="library_role_form">
			<el-form size="medium" :model="formData" :rules="formRules" ref="form" label-width="56px" v-loading="loading">
				<el-form-item label="名称" prop="name">
					<el-input type="input" v-model="formData.name" maxlength="64" show-word-limit></el-input>
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item label="级别" prop="level">
							<el-input-number v-model="formData.level" controls-position="right" :min="0" style="width: 100%"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="2">
						<el-form-item label="是否启用" prop="del" label-width="80px">
							<el-switch v-model="formData.del" active-value="1" inactive-value="0"></el-switch>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="描述" prop="content" style="margin-bottom: 0">
					<el-input type="textarea" v-model="formData.content" maxlength="324" :rows="8" show-word-limit></el-input>
				</el-form-item>
			</el-form>
			<div class="button">
				<template v-for="item in libButtonTree">
					<el-checkbox class="all" :indeterminate="item.indeterminate" v-model="item.checkAll" @change="handleAllChecked($event, item)">
						{{ item.label }}
					</el-checkbox>
					<el-checkbox-group v-model="item.checked" @change="handleCheckedData($event, item)">
						<el-checkbox v-for="button in item.children" :key="button.id" :label="button.id">
							{{ button.name }}
						</el-checkbox>
					</el-checkbox-group>
				</template>
			</div>
		</div>
	</sw-form-frame>
</template>

<script>
import formMixins from '@/mixins/formMixins';
import { getLibraryButtonList } from '@/api/platform/tbRoleButton';
import { queryLibraryRole, addedLibraryRole, updateLibraryRole } from '@/api/platform/tbRoleDefinition';
export default {
	mixins: [formMixins],
	data() {
		return {
			formRules: {
				name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
				level: [{ required: true, message: '请输入级别', trigger: 'blur' }]
			},
			originalButtons: [],
			libButtonTree: []
		};
	},
	computed: {
		buttonType() {
			return this.dictEnums['DISK_ROLE_BUTTON_TYPE'] || [];
		},
		detailData() {
			return eval(queryLibraryRole);
		},
		callFunction() {
			return eval(this.addOrEdit ? addedLibraryRole : updateLibraryRole);
		},
		submitParams() {
			let params = { ...this.formData };
			let checkedButtons = this.libButtonTree.map((n) => n.checked).flat();
			if (this.addOrEdit) {
				params['rbList'] = checkedButtons.map((n) => ({ buttonId: n, operType: '1' }));
			} else {
				let addButton = checkedButtons.filter((n) => this.originalButtons.indexOf(n) === -1);
				let delButton = this.originalButtons.filter((n) => checkedButtons.indexOf(n) === -1);
				params['rbList'] = [...addButton.map((n) => ({ buttonId: n, operType: '1' })), ...delButton.map((n) => ({ buttonId: n, operType: '2' }))];
			}
			return params;
		}
	},
	methods: {
		//获取库按钮数据
		async getLibButtonData() {
			let params = { page: 1, limit: 99999 };
			let result = await getLibraryButtonList(params).then((res) => res.data);
			if (result.code === '0') {
				return Promise.resolve(result.data || []);
			}
		},

		//获取数据详情
		async formatFormParams() {
			if (this.addOrEdit) {
				let datas = await this.getLibButtonData();
				this.formatLibraryButton(datas);
			} else {
				this.formatLibraryButton(this.formData);
			}
		},

		//格式化库按钮
		formatButtons(arr) {
			let btnArr = [];
			arr.map((n) => Object.values(n)).forEach((item) => {
				btnArr = [...btnArr, ...item[0]];
			});
			return btnArr;
		},

		//格式化选中按钮
		formatCheckedButton(arr) {
			return arr.reduce((prev, cur) => {
				!prev.some((n) => n.buttonId === cur.buttonId) && prev.push(cur);
				return prev;
			}, []);
		},

		formatLibraryButton(data) {
			let libraryButtons = this.addOrEdit ? data : this.formatButtons(data.defList);
			let checkedButtons = this.addOrEdit ? [] : this.formatCheckedButton(data.dbList);
			let buttonTree = libraryButtons.reduce((t, v) => {
				return !t[v['type']] && (t[v['type']] = []), t[v['type']].push(v), t;
			}, {});
			this.originalButtons = checkedButtons.map((n) => n.buttonId);
			this.libButtonTree = this.buttonType.map((item) => {
				let childArr = buttonTree[item.value];
				let checkedBtns = checkedButtons.filter((key) => childArr.some((n) => n.id === key.buttonId));
				return {
					label: item.msg,
					children: childArr.reverse(),
					checked: checkedBtns.map((n) => n.buttonId),
					checkAll: childArr.length === checkedBtns.length,
					indeterminate: checkedBtns.length > 0 && childArr.length !== checkedBtns.length
				};
			});
		},

		//
		handleAllChecked(flag, data) {
			data.indeterminate = false;
			data.checked = !flag ? [] : data.children.map((n) => n.id);
		},

		handleCheckedData(arr, data) {
			let arrLen = arr.length;
			let childLen = data.children.length;
			data.checkAll = arrLen === childLen;
			data.indeterminate = arrLen > 0 && arrLen < childLen;
		}
	}
};
</script>
<style lang="scss" scoped>
.library_role_form::v-deep {
	display: flex;
	margin: 0 -10px;
	padding-bottom: 10px;
	.el-form {
		width: 50%;
		padding: 0;
	}
	.button {
		width: 50%;
		flex-shrink: 0;
		margin-left: 16px;
		padding-left: 16px;
		border-left: solid 1px #ebeef5;
		h2 {
			font-size: 14px;
			line-height: 1;
			margin-bottom: 8px;
		}
		.el-checkbox-group {
			display: flex;
			flex-wrap: wrap;
			&:not(:last-child) {
				margin-bottom: 24px;
			}
		}
		.el-checkbox {
			padding: 8px 0;
			&.all {
				padding-top: 0;
				.el-checkbox__label {
					font-weight: bold;
				}
			}
		}
	}
}
</style>
